<template>
  <div>
    <GlobalLayout>
      <div class="main-box">
        <template>
          <keep-alive>
            <router-view/>
          </keep-alive>
        </template>
      </div>
    </GlobalLayout>
  </div>
</template>

<script>
import GlobalLayout from '../GlobalYayouts/GlobalLayout.vue'
const indexKey = '/index'
export default {
  name: 'BasicLayouts',
  components: {
    GlobalLayout
  },
  data() {
    return {
      pageList: [],
      linkList: [],
      activePage: '',
      reloadFlag: true
    }
  },
  watch: {
    '$route': function (newRoute) {
      this.activePage = newRoute.fullPath
      console.log('newRoute', newRoute)
      if (!this.multipage) {
        this.linkList = [newRoute.fullPath]
        this.pageList = [Object.assign({}, newRoute)]
        // 【路由缓存】首页的缓存设置有问题，需要根据后台的路由配置来实现是否缓存
      } else if (indexKey === newRoute.fullPath) {
        console.log('缓存没有', 1)
        // 首页时 判断是否缓存 没有缓存 刷新之
        // if (newRoute.meta.keepAlive === 0) {
        //   this.routeReload()
        // }
        // 【路由缓存】首页的缓存设置有问题，需要根据后台的路由配置来实现是否缓存
      } else if (this.linkList.indexOf(newRoute.fullPath) < 0) {
        this.linkList.push(newRoute.fullPath)
        this.pageList.push(Object.assign({}, newRoute))
        /* 如果新增的页面配置了缓存路由，那么就强制刷新一遍 */
      } else if (this.linkList.indexOf(newRoute.fullPath) >= 0) {
        let oldIndex = this.linkList.indexOf(newRoute.fullPath)
        let oldPositionRoute = this.pageList[oldIndex]
        this.pageList.splice(oldIndex, 1, Object.assign({}, newRoute, {meta: oldPositionRoute.meta}))
      }
    },
    'activePage': function (key) {
      let index = this.linkList.lastIndexOf(key)
      let waitRouter = this.pageList[index]
      // 不允许重复跳转路由异常
      if (waitRouter.fullPath !== this.$route.fullPath) {
        this.$router.push(Object.assign({}, waitRouter))
      }
      this.changeTitle(waitRouter.meta.title)
    },
    'multipage': function (newVal) {
      if (this.reloadFlag) {
        if (!newVal) {
          this.linkList = [this.$route.fullPath]
          this.pageList = [this.$route]
        }
      }
    }
  },
  created() {
    if (this.$route.path !== indexKey) {
      this.addIndexToFirst()
    }
    // 复制一个route对象出来，不能影响原route
    let currentRoute = Object.assign({}, this.$route)
    currentRoute.meta = Object.assign({}, currentRoute.meta)
    this.pageList.push(currentRoute)
    this.linkList.push(currentRoute.fullPath)
    this.activePage = currentRoute.fullPath
  },
  methods: {
    addIndexToFirst() {
      this.pageList.splice(0, 0, {
        name: '',
        path: indexKey,
        meta: {}
      })
      this.linkList.splice(0, 0, indexKey)
    },
    // 动态更改页面标题
    changeTitle(title) {
      let projectTitle = '工业智能物联网平台'
      // 首页特殊处理
      if (this.$route.path === indexKey) {
        document.title = projectTitle
      } else {
        document.title = title + ' · ' + projectTitle
      }
    },
    editPage(key, action) {
      this[action](key)
    },
    remove(key) {
      if (key === indexKey) {
        this.$message.warning('首页不能关闭!')
        return
      }
      if (this.pageList.length === 1) {
        this.$message.warning('这是最后一页，不能再关闭了啦')
        return
      }
      console.log('this.pageList ', this.pageList)
      let removeRoute = this.pageList.filter(item => item.fullPath === key)
      this.pageList = this.pageList.filter(item => item.fullPath !== key)
      let index = this.linkList.indexOf(key)
      this.linkList = this.linkList.filter(item => item !== key)
      index = index >= this.linkList.length ? this.linkList.length - 1 : index
      this.activePage = this.linkList[index]
      // 关闭页面则从缓存cache_included_routes中删除路由，下次点击菜单会重新加载页面
      // let cacheRouterArray = Vue.ls.get(CACHE_INCLUDED_ROUTES) || []
      if (removeRoute && removeRoute[0]) {
        let componentName = removeRoute[0].meta.componentName
        console.log('key: ', key)
        console.log('componentName: ', componentName)
        // if (cacheRouterArray.includes(componentName)) {
        //   cacheRouterArray.splice(cacheRouterArray.findIndex(item => item === componentName), 1)
        //   // Vue.ls.set(CACHE_INCLUDED_ROUTES, cacheRouterArray)
        // }
      }
    },
    getPageKey(target, depth) {
      depth = depth || 0
      if (depth > 2) {
        return null
      }
      let pageKey = target.getAttribute('pagekey')
      pageKey = pageKey || (target.previousElementSibling ? target.previousElementSibling.getAttribute('pagekey') : null)
      return pageKey || (target.firstElementChild ? this.getPageKey(target.firstElementChild, ++depth) : null)
    },
    // 动态路由title显示配置的菜单title而不是其对应路由的title
    dynamicRouterShow(key, title, meta) {
      if (meta.internalOrExternal !== undefined && meta.internalOrExternal === 1) {
        // const token = Vue.ls.get(ACCESS_TOKEN)
        // console.log('3333', `${meta.url}?code=${token}`)
        // window.open(`${meta.url}?code=${token}`)
        // setTimeout(() => {
        //   this.$router.go(0)
        // }, 500)
      } else {
        console.log('09778')
        let keyIndex = this.linkList.indexOf(key)
        if (keyIndex >= 0) {
          let currRouter = this.pageList[keyIndex]
          let meta = Object.assign({}, currRouter.meta, {title: title})
          this.pageList.splice(keyIndex, 1, Object.assign({}, currRouter, {meta: meta}))
          if (key === this.activePage) {
            this.changeTitle(title)
          }
        }
      }
    },
    // 路由刷新
    routeReload() {
      this.reloadFlag = false
    }
  }
}
</script>

<style scoped>

</style>
